<template>
    <h1>操作人员添加</h1>
    <el-form :model="adminnum"
        label-width="100px"
        
        style="max-width: 460px"
        :rules="rules">
        <el-form-item label="姓名" prop="adminname" required    >
            <el-input v-model="adminnum.adminname" clearable placeholder="请输入至少两位的账号名"/>
        </el-form-item>
        <el-form-item label="密码" prop="password" required>
            <el-input type="password" v-model="adminnum.password" :show-password="true" clearable   placeholder="请输入3-8位字母或数字或下划线的字符"  />
        </el-form-item>
        <el-form-item label="角色">
            <el-radio-group v-model="adminnum.role">
                <el-radio :label="1">超级管理员</el-radio>
                <el-radio :label="2">普通管理员</el-radio>
            </el-radio-group>
        </el-form-item>
        <p>
     
                <el-tree ref="tree" :data="data" show-checkbox node-key="id" highlight-current  />

        </p>
        <el-form-item>
            <el-button type="primary" @click="addAdmin">添加</el-button>
        </el-form-item>
    </el-form>
</template>
    
<script setup lang="ts">

import { ElMessage,ElTree } from 'element-plus';
import { ref, reactive } from 'vue';
import service from '../../../utils/service';
import { useRouter } from "vue-router";
import { data as data} from '../../../Threedes/menudata'
import { concat } from 'lodash';
import { TreeKey } from "element-plus/es/components/tree/src/tree.type";

const $router = useRouter();

interface adminlist {
    adminname: string,
    password: string,
    role: number,
    checkedKeys: TreeKey[]
}
const adminnum = reactive<adminlist>({
    adminname: "",
    password: "",
    role: 1,
    checkedKeys: []
})
const validateAdminname = (rule: any, value: any, callback: any) => {
    if (value === "") {
        callback(new Error("请输入账号"));
    } else if (/^.{2,10}$/.test(value) == false) {
        callback(new Error("请输入符合至少两位的账号名"));
    } else {
        callback();
    }
};
const validatePassword = (rule: any, value: any, callback: any) => {
    if (value === "") {         
        callback(new Error("请输入密码"));
    } else if (/^\w{3,8}$/.test(value) == false) {
        callback(new Error("请输入3-8位字母或数字或下划线的字符"));
    } else {
        callback();
    }
};

const rules = ref({
    password: [{ validator: validatePassword, trigger: "change" }],
    adminname: [{ validator: validateAdminname, trigger: "change" }],
});
let tree = ref<InstanceType<typeof ElTree>>();

const addAdmin = () => {
    let arr: TreeKey[] = tree.value!.getCheckedKeys(false)
    let arr2: TreeKey[] = tree.value!.getHalfCheckedKeys()
    arr=arr.concat(arr2)
    adminnum.checkedKeys = arr
    // console.log(arr);

    service({
        url: "/admin/add",
        method: "post",
        data: adminnum
    }).then(res => {
        if (res.data.code === "200") {
            ElMessage({
                message: "亲，恭喜您，添加成功！",
                type: "success"
                
            }) 
            $router.push("/sheet/adminlist");
        } else if (res.data.code === "10004") {
            ElMessage.error('添加失败，该管理员已存在！')
        } else if (res.data.code === "10008") {
            ElMessage({
                message: '管理员名不能大于6位',
                type: 'warning',
            })
        }

    })
}

</script>
    
<style >
</style>